<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>fw</title>
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/animate.min.css" type="text/css">
		<link rel="stylesheet" href="css/style.css" type="text/css">
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
		<script src="js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script src="js/swiper.animate1.0.2.min.js"></script>
		<script src="js/public.js"></script>
		<script src="js/echarts.min.js"></script>
		<script>
			document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth / 19.2 + 'px'
			window.onresize = function() {
				document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth / 19.2 + 'px'
			}
		</script>
	</head>

	<body>
		<div class="indexContainer">
			<div class="top">
				<div class="time">
					<div class="wendu">
						<p>8-13℃</p>
						<p>多云转晴</p>
					</div>
					<div class="sj">
						<p>星期四</p>
						<p>2023-11-09</p>
						<p>|</p>
						<p>09:35:26</p>
					</div>
				</div>
			</div>
			<div class="conMain">
				<div class="conLeft">
					<div class="imp">
						<div class="tit">重要数据</div>
						<div class="nr">
							<ul>
								<li>
									<div class="icon">2634</div>
									<p>综合农业服务中心</p>
								</li>
								<li>
									<div class="icon">2634</div>
									<p>涉农村数</p>
								</li>
								<li>
									<div class="icon">2634</div>
									<p>农机总动力</p>
								</li>
								<li>
									<div class="icon">2634</div>
									<p>综合生成综合<br />机械化率</p>
								</li>
								<li>
									<div class="icon">2634</div>
									<p>农业机械化率</p>
								</li>
								<li>
									<div class="icon">2634</div>
									<p>秸秆综合利用率</p>
								</li>
							</ul>
						</div>
					</div>
					<div class="terminal">
						<div class="tit">
							智能终端<span>终端数量<b>10036</b></span>
						</div>
						<div class="nr">
							<div class="bt">单位100</div>
							<div class="layer">
								<p>时长</p>
								<div class="timeBox">
									<b>周</b>
									<span>1</span>
									<span>0</span>
									<span>0</span>

								</div>
								<div class="timeBox">
									<b>月</b>
									<span>1</span>
									<span>2</span>
									<span>3</span>
									<span>3</span>
								</div>
								<div class="timeBox">
									<b>年</b>
									<span>7</span>
									<span>8</span>
									<span>9</span>
									<span>1</span>
									<span>1</span>
								</div>
							</div>
							<div class="layer">
								<p>时长</p>
								<div class="timeBox">
									<span>1</span>
									<span>0</span>
									<span>0</span>

								</div>
								<div class="timeBox">
									<span>1</span>
									<span>2</span>
									<span>3</span>
									<span>3</span>
								</div>
								<div class="timeBox">
									<span>7</span>
									<span>8</span>
									<span>9</span>
									<span>1</span>
									<span>1</span>
								</div>
							</div>
						</div>
					</div>
					<div class="map1">
						<div class="tit">农机分布</div>
						<div id="map1"></div>
					</div>
				</div>
				<div class="conCenter">
					<div class="conList">
						<ul>
							<li>
								<div class="icon"><img src="images/index_03.png"></div>
								<div class="text">
									<h2>30</h2>
									<p>农事服务中心</p>
								</div>
							</li>
							<li>
								<div class="icon"><img src="images/index_06.png"></div>
								<div class="text">
									<h2>63</h2>
									<p>机库</p>
								</div>
							</li>
							<li>
								<div class="icon"><img src="images/index_09.png"></div>
								<div class="text">
									<h2>31</h2>
									<p>烘干中心</p>
								</div>
							</li>
							<li>
								<div class="icon"><img src="images/index_26.png"></div>
								<div class="text">
									<h2>896</h2>
									<p>拖拉机</p>
								</div>
							</li>
							<li>
								<div class="icon"><img src="images/index_20.png"></div>
								<div class="text">
									<h2>397</h2>
									<p>收割机</p>
								</div>
							</li>
							<li>
								<div class="icon"><img src="images/index_28.png"></div>
								<div class="text">
									<h2>555</h2>
									<p>插秧机</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="map-nav">
						<div class="nav active">农事服务中心(30)</div>
						<div class="nav">烘干中心(31)</div>
						<div class="nav">维修点(10)</div>
						<div class="nav">机库(63)</div>
						<div class="nav">开始循环</div>
					</div>
					<div id="map"></div>
				</div>
				<div class="conRight">
					<div class="video">
						<div class="tit">宣传片</div>
						<div class="nr">
							<div class="swiper-container">
								<div class="swiper-wrapper">
									<div class="swiper-slide"><video controls="controls" src=""></video></div>
									<div class="swiper-slide"><video controls="controls" src=""></video></div>
									<div class="swiper-slide"><video controls="controls" src=""></video></div>
									<div class="swiper-slide"><video controls="controls" src=""></video></div>
								</div>
							</div>
							<div class="swiper-button-next"></div>
							<div class="swiper-button-prev"></div>
						</div>
					</div>
					<div class="conList2">
						<div class="tit">巡检统计</div>
						<div class="nr">
							<div class="bt">巡检年份2023</div>
							<ul>
								<li><img src="images/index_17.png"></li>
								<li><img src="images/index_23.png"></li>
								<li><img src="images/index_37.png"></li>
								<li><img src="images/index_39.png"></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="js/echart-gl.min.js"></script>
<script src="js/taiCangMap.js"></script>
<script>
	// 中间大图
	function initMap() {
		var hong =
			''
		var huang =
			''
		var lu =
			''
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('map'));

		// 指定图表的配置项和数据

		echarts.registerMap('map', mapjson);
		console.log(mapjson)
		option = {
			geo3D: {
				map: 'map',
				regionHeight: 3, //地图厚度
				itemStyle: {
					color: 'rgba(0,0,102,.5)',
					borderWidth: 1, //分界线宽度
					borderColor: '#33cccc', //分界线颜色
				},
				emphasis: {
					itemStyle: {
						color: 'rgba(0,0,102,1)',
						borderWidth: 1, //分界线宽度
						borderColor: '#33cccc', //分界线颜色
					},
				},
				shading: 'lambert',
				label: {
					show: false
				},
				viewControl: {
					distance: 100, // 地图视角 控制初始大小
					// rotateSensitivity: 0, // 旋转
					// zoomSensitivity: 0, // 缩放
					// autoRotate: false,
					// maxBeta: Infinity,
					// minBeta: -Infinity,
					beta: 0, //旋转视角
					alpha: 25, //视角
					panMouseButton: 'left',
					rotateMouseButton: 'right',
					center: [-10, -15, 0],
				},
			},
			series: [{
					type: 'scatter3D',
					coordinateSystem: 'geo3D',
					data: [
						[121.14824, 31.46224],
						[121.15824, 31.55224],
						[121.05824, 31.45224],
					],
					symbol: 'image://' + hong,
					symbolSize: 30,
					symbolOffset: [0, 0],
					label: {
						show: false
					},
					itemStyle: {
						color: '#cc0066'
					}
				}, {
					type: 'scatter3D',
					coordinateSystem: 'geo3D',
					data: [
						[121.09524, 31.56224],
						[121.02824, 31.45224],
						[121.05824, 31.55224],
					],
					symbol: 'image://' + hong,
					symbolSize: 30,
					symbolOffset: [0, 0],
					label: {
						show: false
					},
					itemStyle: {
						color: '#cc9900'
					}
				},
				{
					type: 'scatter3D',
					coordinateSystem: 'geo3D',
					data: [
						[121.15824, 31.43224],
						[121.08824, 31.49224],
					],
					symbol: 'image://' + hong,
					symbolSize: 30,
					symbolOffset: [0, 0],
					label: {
						show: false
					},
					itemStyle: {
						color: '#00cc33'
					}
				},
			],
		};
		myChart.setOption(option);

	}
	
	// 左侧小图
	function initMap1() {
		var hong =''
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('map1'));
	
		// 指定图表的配置项和数据
	
		echarts.registerMap('map', mapjson);
		console.log(mapjson)
		option = {
			geo: {
				map: 'map',
				regionHeight: 3, //地图厚度
				itemStyle: {
					color: 'rgba(0,0,102,.5)',
					borderWidth: 1, //分界线宽度
					borderColor: '#33cccc', //分界线颜色
				},
				emphasis: {
					itemStyle: {
						color: 'rgba(0,0,102,1)',
						borderWidth: 1, //分界线宽度
						borderColor: '#33cccc', //分界线颜色
					},
				},
				shading: 'lambert',
				label: {
					show: false
				},
				viewControl: {
					distance: 100, // 地图视角 控制初始大小
					// rotateSensitivity: 0, // 旋转
					// zoomSensitivity: 0, // 缩放
					// autoRotate: false,
					// maxBeta: Infinity,
					// minBeta: -Infinity,
					beta: 0, //旋转视角
					alpha: 25, //视角
					panMouseButton: 'left',
					rotateMouseButton: 'right',
					center: [-10, -15, 0],
				},
			},
			series: [{
					type: 'scatter',
					coordinateSystem: 'geo',
					data: [
						[121.15824, 31.53224],
						[121.08824, 31.59224],
						[121.14824, 31.46224],
						[121.15824, 31.59224],
						[121.05824, 31.45224],
						[121.15824, 31.63224],
						[121.08824, 31.49224],
					],
					symbol: 'image://' + hong,
					symbolSize: 10,
					symbolOffset: [0, 0],
					label: {
						show: false
					},
					itemStyle: {
						color: '#cc0066'
					}
				}
			],
		};
		myChart.setOption(option);
	
	}
	
	
	initMap()
	initMap1()
	var swiper = new Swiper(".video .swiper-container", {
		navigation: {
			nextEl: ".video .swiper-button-next",
			prevEl: ".video .swiper-button-prev",
		},
	});
</script>